<template>
  <a-modal
    title="商户级限额管理详情"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="merchantLevelManagerInfoVisiable"
  >
    <a-tabs>
      <a-tab-pane
        key="1"
        tab="商户限额"
      >
    <a-form :form="form">
      <a-row>商户限额</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="商户号"
                       v-bind="formItemLayout">
            <a-input v-decorator="['mcNo',{rules: [{ required: true, message: '必填字段'}]}]" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="日累计限额"
                       v-bind="formItemLayout">
            <a-input v-decorator="['dayLimitAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label='月累计限额'
                       v-bind="formItemLayout">
            <a-input v-decorator="['monthLimitAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>借记限额</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="单笔借记限额"
                       v-bind="formItemLayout">
            <a-input v-decorator="['singleLimitLoanMaxAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='日累计借记限额'
                       v-bind="formItemLayout">
            <a-input v-decorator="['dayLimitLoanAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="月累计借记限额"
                       v-bind="formItemLayout">
            <a-input v-decorator="['monthLimitLoanAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>贷记限额</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="单笔贷记限额"
                       v-bind="formItemLayout">
            <a-input v-decorator="['singleLimitCreditMaxAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='日累计贷记限额'
                       v-bind="formItemLayout">
            <a-input v-decorator="['dayLimitCreditAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="月累计贷记限额"
                       v-bind="formItemLayout">
            <a-input v-decorator="['monthLimitCreditAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>退款限额</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="日累计限额"
                       v-bind="formItemLayout">
            <a-input v-decorator="['refundDayLimitAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='单笔借记限额'
                       v-bind="formItemLayout">
            <a-input v-decorator="['reSingleLimitLoanMaxAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="日累计借记限额"
                       v-bind="formItemLayout">
            <a-input v-decorator="['refundDayLimitLoanAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='单笔贷记限额'
                       v-bind="formItemLayout">
            <a-input v-decorator="['reSingleLimitCredMaxAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="日累计贷记限额"
                       v-bind="formItemLayout">
            <a-input v-decorator="['refundDayLimitCredAmt']" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <br>

    </a-form>
      </a-tab-pane>
      <a-tab-pane
        key="2"
        tab="商户终端限额"
        @click="getTermQuotaList"
      >
        <div :class="advanced ? 'search' : null">
          <!-- 搜索区域 -->
          <a-form layout="horizontal">
            <div :class="advanced ? null: 'fold'">
              <a-row>
                <a-col :md="12" :sm="24">
                  <a-form-item label="商户号"
                               v-bind="formItemLayout">
                    <a-input v-model="queryParams.mchntNo" :disabled="true"/>
                  </a-form-item>
                </a-col>
                <a-col :md="12" :sm="24" v-show="this.instId!=''">
                  <a-form-item
                    label="终端编号"
                    :labelCol="{span: 5}"
                    :wrapperCol="{span: 18, offset: 1}">
                    <a-select
                      show-search
                      placeholder="请输入代码或名称"
                      option-filter-prop="children"
                      style="width: 334px"
                      :filter-option="filterOption"
                      @focus="tremSelectMchntNo"
                      @search="tremSelectMchntNo"
                      @change="tremSelected"
                      v-model="queryParams.termNo"
                    >
                      <a-select-option v-for="d in tremSuData" :key="d.termNo">
                        {{ d.termNo }}-{{d.tmName}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

              </a-row>
            </div>
            <div style="text-align: center;margin-bottom: 20px " v-show="this.instId!=''">
              <a-button type="primary" @click="getTermQuotaList">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetT">重置</a-button>
            </div>
          </a-form>
        </div>
        <div v-show="this.instId!=''">
          <a-table ref="TableInfo"
                   :columns="columns"
                   :rowKey="
          (record, index) => {
            return index;
          }
        "
                   :dataSource="dataSource"
                   :pagination="pagination"
                   :loading="loading"
                   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                   :scroll="{ x: 2600 }"
                   @change="handleTableChange">
            <template slot="email" slot-scope="text, record">
              <a-popover placement="topLeft">
                <template slot="content">
                  <div>{{text}}</div>
                </template>
                <p style="width: 150px;margin-bottom: 0">{{text}}</p>
              </a-popover>
            </template>
            <template slot="tremMchntInfoOperation" slot-scope="text, record">
              <a-icon v-hasPermission="['merchantLevelManager:view']" type="eye" theme="twoTone" twoToneColor="#42b983"
                      @click="editMerchantLevelManager(record)" title="查看"></a-icon>
              <a-badge v-hasNoPermission="['merchantLevelManager:view']" userStatus="warning" text="无权限"></a-badge>
            </template>
          </a-table>
          <!-- 查看 -->
          <trem-mchnt-info
            ref="tremMchntInfo"
            @close="handleTremMchntInfoClose"
            @success="handleTremMchntInfoSuccess"
            :instId="this.instId"
            :tremMchntInfoVisiable="tremMchntInfo.visiable"
            :disabled="true" >
          </trem-mchnt-info>


        </div>
      </a-tab-pane>
    </a-tabs>
  </a-modal>

</template>
<script>

  import TremMchntInfo from "./TremMchntInfo";

  const formItemLayout = {
    labelCol: {span: 8},
    wrapperCol: {span: 16}
  }
  export default {
    name: 'MerchantLevelManagerEdit',
    components: {TremMchntInfo},
    props: {
      merchantLevelManagerInfoVisiable: {
        default: false
      },
      instId: '',
    },
    data() {
      return {
        data: [],
        tremSuData:[],
        selectedRowKeys: [],
        advanced: false,
        suData: [],
        mchntNoLevelInfo: {
          visiable: false
        },
        tremMchntInfo: {
          visiable: false
        },
        pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
        },
        queryParams: {
          instId: '',
          mchntNo: '',
          termNo:''
        },
        dataSource: [],
        loading: false,
        formItemLayout,
        form: this.$form.createForm(this),
        validateStatus: '',
        // firstValue: {},
        info: {
          infoName: '',
          remark: '',
          menuId: ''
        }
      }
    },
    computed: {
      show: {
        get: function () {
          return this.merchantLevelManagerInfoVisiable
        },
        set: function () {
        }
      },
      columns() {
        return [{
          title: '终端编号',
          dataIndex: 'termNo',
          scopedSlots: {customRender: 'termNo'},
        },  {
          title: '单笔借记限额(元)',
          dataIndex: 'singleLimitLoanMaxAmt',
          scopedSlots: {customRender: 'singleLimitLoanMaxAmt'},
        }, {
          title: '单笔贷记限额(元)',
          dataIndex: 'singleLimitCreditMaxAmt',
          scopedSlots: {customRender: 'singleLimitCreditMaxAmt'},
        },{
          title: '日累计借记限额(元)',
          dataIndex: 'dayLimitLoanAmt',
          scopedSlots: {customRender: 'dayLimitLoanAmt'},
        }, {
          title: '日累计贷记限额(元)',
          dataIndex: 'dayLimitCreditAmt',
          scopedSlots: {customRender: 'dayLimitCreditAmt'},
        }, {
          title: '月累计借记限额(元)',
          dataIndex: 'monthLimitLoanAmt',
          scopedSlots: {customRender: 'monthLimitLoanAmt'},
        }, {
          title: '月累计贷记限额(元)',
          dataIndex: 'monthLimitCreditAmt',
          scopedSlots: {customRender: 'monthLimitCreditAmt'},
        }, {
          title: '日累计限额',
          dataIndex: 'dayLimitAmt',
          scopedSlots: {customRender: 'dayLimitAmt'},
        }, {
          title: '月累计限额',
          dataIndex: 'monthLimitAmt',
          scopedSlots: {customRender: 'monthLimitAmt'},
        }, {
          title: '操作',
          dataIndex: 'tremMchntInfoOperation',
          fixed: 'right',
          scopedSlots: {customRender: 'tremMchntInfoOperation'}
        }]
      },
    },
    mounted() {

    },

    methods: {
      handleTremMchntInfoSuccess() {
        this.tremMchntInfo.visiable = false
        this.getTermQuotaList()
        this.search()
      },
      search() {
        this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
        if (this.paginationInfo) {
          this.paginationInfo.current = this.pagination.defaultCurrent
          this.paginationInfo.pageSize = this.pagination.defaultPageSize
        }

        let {sortedInfo, filteredInfo} = this
        let sortField, sortOrder
        // 获取当前列的排序和列的过滤规则
        if (sortedInfo) {
          sortField = sortedInfo.field
          sortOrder = sortedInfo.order
        }
        let params = this.queryParams

        this.fetch({
          sortField: sortField,
          sortOrder: sortOrder,
          ...params,
          ...filteredInfo
        })
      },
      handleTremMchntInfoClose() {
        this.tremMchntInfo.visiable = false
        this.getTermQuotaList()
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      tremSelected(val) {
        this.tremSelectMchntNo(val)
      },
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      reset() {
        this.loading = false
        this.form.resetFields()
      },
      resetT(){
        debugger
        this.tremSuData=[]
        this.queryParams.termNo=''
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },
      handleTableChange(pagination, filters, sorter) {
        this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
        if (this.paginationInfo) {
          this.paginationInfo.current = this.pagination.defaultCurrent
          this.paginationInfo.pageSize = this.pagination.defaultPageSize
        }

        // 将这三个参数赋值给Vue data，用于后续使用
        this.paginationInfo = pagination
        this.filteredInfo = filters
        this.sortedInfo = sorter
        // this.userInfo.visiable = false

        this.fetch({
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...this.queryParams,
          ...filters
        })
      },
      tremSelectMchntNo(val) {
        let mchntNo = this.queryParams.mchntNo

        if (mchntNo) {
          this.tremSuData = []
          let param = {}
          if (val) {
            param = {
              q: encodeURIComponent(val + `&${this.queryParams.instId}`),
              pageSize: 20,
              mcNo: mchntNo,
              opp: '0'
            }

            if (val.length >= 5) {
              this.$get('/admin/quota/merchantLevelManager/getAddTermNoList', param).then((r) => {
                let result = r.data.data
                this.tremSuData = result;
              })
            }
          } else {
            param = {
              q: encodeURIComponent(`&${this.queryParams.instId}`),
              pageSize: 20,
              mcNo: mchntNo,
              opp: '0'
            }
            this.$get('/admin/quota/merchantLevelManager/getAddTermNoList', param).then((r) => {
              let result = r.data.data
              this.tremSuData = result;
            })
          }
        } else {
          this.$message.warning('请先选择商户号获取终端编码！')
        }
      },
      setMerchantLevelManagerFormValues({...info}) {
        let fields = ['mcNo','instId', 'dayLimitAmt', 'monthLimitAmt', 'singleLimitLoanMaxAmt', 'dayLimitLoanAmt',
          'monthLimitLoanAmt', 'singleLimitCreditMaxAmt', 'dayLimitCreditAmt', 'monthLimitCreditAmt', 'refundDayLimitAmt',
          'reSingleLimitLoanMaxAmt', 'refundDayLimitLoanAmt', 'reSingleLimitCredMaxAmt', 'refundDayLimitCredAmt']
        Object.keys(info).forEach((key) => {
          if (fields.indexOf(key) !== -1) {
            this.form.getFieldDecorator(key)
            let obj = {}
            obj[key] = info[key]
            if (key=='mcNo'){
              this.queryParams.mchntNo=  obj.mcNo
            }
            if (key=='instId'){
              this.queryParams.instId=  obj.instId
            }
            this.form.setFieldsValue(obj)
          }
        })
      },
      editMerchantLevelManager(record) {
        record.mchntNo = this.queryParams.mchntNo;
        record.operatorType='info';
        this.$refs.tremMchntInfo.setInfoFieldsTremValues(record)
        this.tremMchntInfo.visiable = true

      },
      async getTermQuotaList(params = {}) {
        this.loading = true
        if (this.paginationInfo) {
          // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
          this.$refs.TableInfo.pagination.current = this.paginationInfo.current
          this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
          params.pageSize = this.paginationInfo.pageSize
          params.pageNum = this.paginationInfo.current
          params.instId = this.queryParams.instId
          params.mcNo = this.queryParams.mchntNo
        } else {
          // 如果分页信息为空，则设置为默认值
          params.pageSize = this.pagination.defaultPageSize
          params.pageNum = this.pagination.defaultCurrent
          params.instId = this.queryParams.instId
          params.mcNo = this.queryParams.mchntNo
        }

        this.$get('/admin/quota/merchantLevelManager/getTermQuotaList',
          params).then((r) => {

          this.dataSource = r.data.content
          const pagination = {...this.pagination}
          this.pagination = pagination
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
    }}
</script>


